<template>
  <div class="custom-tabs-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClickTabs" class="tabsContainer">
      <!--待审核-->
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-document"></i>{{auditTitle}}
          <!--待审核的数据条数-->
          <span v-show="auditCount !=''">
            ({{auditCount}})
          </span>
        </span>
        <food-disease-main :ref="audit.ref"></food-disease-main>
      </el-tab-pane>

      <!--待补充-->
      <el-tab-pane name="2">
        <span slot="label">
          <i class="el-icon-edit"></i>{{replenishTitle}}
             <span v-show="rejectCount !=''">
            ({{rejectCount}})
             </span>
        </span>
        <food-disease-main :ref="replenish.ref"></food-disease-main>
      </el-tab-pane>

      <!--已提交-->
      <el-tab-pane name="3">
        <span slot="label">
          <i class="el-icon-folder-checked"></i>{{submitTitle}}
             <span v-show="submitCount !=''">
            ({{submitCount}})
             </span>
        </span>
        <food-disease-main :ref="submit.ref"></food-disease-main>
      </el-tab-pane>

      <!--已驳回-->
      <el-tab-pane name="4">
        <template #label>
          <span> <i class="el-icon-refresh-left"></i>{{rejectTitle}}</span>
          <el-badge :value="rejectCount" v-show="rejectCount !=''" type="warning"/>
        </template>
        <food-disease-main :ref="rejected.ref"></food-disease-main>
      </el-tab-pane>

      <!--上报成功-->
      <el-tab-pane name="5">
        <template #label>
          <span> <i class="el-icon-check"></i>{{successTitle}}</span>
          <el-badge :value="successCount" v-show="successCount !=''" type="primary"/>
        </template>
        <food-disease-main :ref="success.ref"></food-disease-main>
      </el-tab-pane>

      <!--上报失败-->
      <el-tab-pane name="6">
        <!--插槽显示标题-->
        <template #label>
          <span> <i class="el-icon-close"></i>{{failTitle}}</span>
          <el-badge class="tab-badge" :value="failCount"/>
        </template>
        <food-disease-main></food-disease-main>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import FoodDiseaseMain from "./modules/FoodDiseaseMain";

  export default {
    name: "FoodDiseaseList",
    components: {FoodDiseaseMain},
    data() {
      return {
        activeName: '1',//tab初始为1

        auditCount: '12',//待审核的数据
        replenishCount: '',//待补充数据
        rejectCount: '11',//已驳回的数据
        submitCount: '10',//已提交的数据
        successCount: '14',//成功的数据
        failCount: '99',//失败的数据

        auditTitle: '待审核', // 待审核动态标题
        replenishTitle: '待补充', // 待补充动态标题
        rejectTitle: '已驳回', // 已驳回动态标题
        submitTitle: '已提交', // 已提交动态标题
        successTitle: '上报成功',
        failTitle: '上报失败', // 上报失败动态标题

        /** 待审核 */
        audit: {
          ref: 'auditRef', // 组件ref
        },
        /** 待补充 */
        replenish: {
          ref: 'replenishRef',
        },
        /** 已驳回 */
        rejected: {
          ref: 'rejectedRef',
        },
        /** 已提交 */
        submit: {
          ref: 'submitRef',
        },
        /** 上报成功 */
        success: {
          ref: 'successRef',
        },
        /** 上报失败 */
        fail: {
          ref: 'failRef',
        },
      }
    },
    mounted() {
      this.loadMain(1)
    },
    methods: {
      handleClickTabs(tab, event) {
        console.log("数据", tab.name);
      },
      /** 初始化 待审核传参 */
      loadMain(type) {

      }
    }
  }
</script>

<style scoped>
  .tabsContainer {
    padding-top: 20px;
    padding-left: 2%;
    padding-right: 2%;
  }
</style>
